<template>
<view class="hpaint">
    <view class="flex-2">
    <view class="first block1">
        <!-- <image class="img1" src="/static/tabbar/5_a.png"></image> -->
        <text :class="activeIdx==0?'active':'blo7'" class="blo7" @tap="chooseTab(0)">图生图</text>
        <text :class="activeIdx==1?'active':'blo7'" class="blo7" @tap="chooseTab(1)">文生图</text>
    
    </view>
    <view class="gradient">{{ count+unit }}</view>
</view>

<!-- 第一步 -->
<view class="first-blo" v-if="activeIdx==0">
    <view class="title">
        <view class="gradient">第一步</view>
        <view class="val">请上传图片</view>
    </view>

    <view class="blo dash" style="padding: 0;">
        <Upload type="custom" :imgUrl="src" @getImg="val=>src=val">
            <view class="upd" :style="{
                width:'calc('+screenWidth+'px - 28px)'
            }">
                <view class="center" v-if="!src">
                <uni-icons style="margin-top: 20px;" type="plus-filled" size="50" color="#fff"></uni-icons>

                <view class="text">点击上传图片</view>
                <view class="text1">支持图片格式：JPG,PNG, Max:10MB</view>
            </view>
            <image class="image" mode="heightFix" v-else :src="src"></image>
               
            </view>
           

            
        </Upload>
				
    </view>

</view>
<view class="first-blo" v-else>
    <view class="title">
        <view class="gradient">第一步</view>
        <view class="val">
            
            

            输入描述词</view>
    </view>

    <view class="blo">
        <textarea :maxlength="-1" auto-height class="index-inp-inner" :placeholder-style="{
                color:'#666',
                fontSize:'12px'
              }" placeholder="..." 
							confirm-type="send" style="min-height: 100px;font-size: 30rpx;width:100%" 
							cursor-spacing="40" @confirm="sendMessage" 
						 @input="isExceed"
							ref="inputRef" v-model="inputcontent" /> 
            <view class="flex-2 grey">
                <view @tap="getData"><uni-icons color="#999" type="loop" size="16" style="margin-right: 4px;"></uni-icons>随机输入</view>
                <view><text>{{inputcontent.length}}/{{ textTotal }} ｜</text>
                    <text @tap="clear" class="green">清空</text>
                </view>
            </view>
    </view>

</view>

<!-- 第二步 -->
<view class="first-blo second">
    <view class="title">
        <view class="gradient">第二步</view>
        <view class="val">选择风格</view>
    </view>

    <scroll-view scroll-x scroll-with-animation>
        <view class="flex-l">
        <view @tap="activeId=item.id" :style="{
            border:activeId==item.id?'1px solid #7CD887':'none',
          
                width:'calc(('+ screenWidth + 'px - 28px - 14px * 3) /4 )',
                height:'calc(('+ screenWidth + 'px - 28px - 14px * 3) /4 )',
            
        }" class="posi1" v-for="(item,index) in styles1">

            <image class="img" :style="{
                width:'calc(('+ screenWidth + 'px - 28px - 14px * 3) /4 - 2px)',
                height:'calc(('+ screenWidth + 'px - 28px - 14px * 3) /4 - 2px)',
            }" :src="item.tp_url"></image>
            <view class="mask" :style="{
                width:'calc(('+ screenWidth + 'px - 28px - 14px * 3) /4 - 2px)',
                height:'calc(('+ screenWidth + 'px - 28px - 14px * 3) /4 - 2px)',
            }"></view>
            <view class="title2">{{ item.title }}</view>
            <text class="vip" v-if="item.vip_status">VIP</text>
            
        </view>
        </view>
        <view class="flex-l">
        <view @tap="activeId=item.id" :style="{
            border:activeId==item.id?'1px solid #7CD887':'none',

            width:'calc(('+ screenWidth + 'px - 28px - 14px * 3) /4 )',
                height:'calc(('+ screenWidth + 'px - 28px - 14px * 3) /4 )',
        }" class="posi1" v-for="(item,index) in styles2">

            <image class="img" :style="{
                width:'calc(('+ screenWidth + 'px - 28px - 14px * 3) /4 - 2px)',
                height:'calc(('+ screenWidth + 'px - 28px - 14px * 3) /4 - 2px)',
            }" :src="item.tp_url"></image>
             <view class="mask" :style="{
                width:'calc(('+ screenWidth + 'px - 28px - 14px * 3) /4 - 2px)',
                height:'calc(('+ screenWidth + 'px - 28px - 14px * 3) /4 - 2px)',
            }"></view>
            <view class="title2">{{ item.title }}</view>
            <text class="vip" v-if="item.vip_status">VIP</text>
            
        </view>
    </view>
		
    </scroll-view>
</view>


<!-- 第三步 -->
<view class="first-blo second third">
    <view class="title">
        <view class="gradient">第三步</view>
        <view class="val">选择尺寸</view>
    </view>

    <scroll-view class="" scroll-x scroll-with-animation>
        <view class="flex-l">
        <view @tap="sizeId=item.size" :style="{
            width:'calc(('+screenWidth+'px - 28px - 14px * 4) / 4 )',
            height:'calc(('+screenWidth+'px - 28px - 14px * 4) / 4 )',
            border:sizeId==item.size?'1px solid #7CD887':'none'
        }" class="blo" v-for="(item,index) in sizes">

           <view class="size">{{ item.size }}</view>
            <view class="title3">{{ item.title }}</view>
            <!-- <text class="vip" v-if="item.vip_status">VIP</text> -->
            
        </view>
    </view>


		
    </scroll-view>
</view>

<ZWait tip="在我的" ref="zwait"></ZWait>

</view>

</template>
 
<script>
 
let s;
import {debounce} from '@/utils'
import ZWait from '@/components/z-wait/z-wait'
import Upload from '@/components/upload/upload'
export default {
    props: {},
    components:{ ZWait,Upload },
    emits:['changeTabbar'],
    data() {
        return {
            count:'',
            unit: "条",
            cost: "",
            activeIdx: 0,
            inputcontent: "",
            styles1: [],
            styles2: [],
            sizes: [],
            activeId: "",
            sizeId: "",
            src:'',
            screenWidth:0,
            timer:null,
            msgId:'',
            textTotal:500,
        };
    },
    async created() {
        s = this;
        s.unit = uni.getStorageSync('unit')
        this.screenWidth = uni.getStorageSync('screenWidth')
        s.getData();
        s.getStyle();
        s.getSize();
        s.getData1()
    },
    methods: {
        isExceed(){
            if(this.inputcontent.length>this.textTotal){
                this.inputcontent.slice(0,this.textTotal)
                this.$u.toast('字数不能超过'+this.textTotal)
            }
        },
        async getData1(){
				const r = await this.$u.api.userInfo()
				if(r){
					this.count = r.data.residue_degree 
				}
			},
        async send(){
            clearInterval(this.timer)
            this.timer = null
            debounce(()=>{
                s.send1()
            })
        },
        async getResult(){
            const r = await s.$u.api.hpaintResult(
                {
                    msgid:s.msgId
                }
            )
            if(r){  
                if(r.msg!='图片生成中..'){
                    clearInterval(s.timer)
                    s.timer = null
                    s.$refs['zwait'].show(false)
                    s.$emit('changeTabbar',3)
                }
                
            }
        },
        async send1() {
            const r = await s.$u.api.hpaintSend(
                {
                    message:s.activeIdx==1?s.inputcontent:s.src,
                    style_id:s.activeId,
                    size:s.sizeId
                }
            )
            if(r){  
                s.msgId = r.data.msgid

                this.timer = setInterval(()=>{
                    s.getResult()
                },4000)
                s.$refs['zwait'].show(true)
            }

            
        },
        async getData() {
            const r = await s.$u.api.hpaintText();
            if (r) {
                s.inputcontent = r.data;
            }
        },
        async getSize() {
            const r = await s.$u.api.hpaintSize();
            if (r) {
                s.sizes = r.data;
                if (r.data.length > 0) {
                    s.sizeId = r.data[0].size;
                }
            }
        },
        async getStyle() {
            const r = await s.$u.api.hpaintStyle();
            if (r) {
                if (r.data.length > 8) {
                    let num = Math.ceil(r.data.length / 2);
                    for (let i = 0; i < r.data.length; i++) {
                        if (i < num) {
                            s.styles1.push(r.data[i]);
                        }
                        else {
                            s.styles2.push(r.data[i]);
                        }
                    }
                }
                else {
                    s.styles1 = r.data;
                }
                if (r.data.length > 0) {
                    this.activeId = r.data[0].id;
                }
            }
        },
        chooseTab(idx) {
            s.activeIdx = idx;
        },
        clear() {
            s.inputcontent = "";
        }
    },
}
</script>
<style scoped lang="scss">
.hpaint{
    position: relative;
    padding:0 14px;
    color: #fff;
    .first{
    display: flex;
    justify-content: flex-start;
    align-items: space-between;
}
.img1{
    width: 40rpx;
    height: 40rpx;
    margin-top: 4px;
}
.block1{
		white-space: nowrap;
		overflow-x: auto;
		// margin:50rpx  0  30rpx;

		.blo7{
			display: inline-flex;
			color: #fff;
			font-size: 38rpx;
			padding-bottom: 12rpx;
			margin-left: 30rpx;
			margin-right: 30rpx;
		}
		.active{
			color: rgb(124, 216, 135);
			font-weight: 500;
			border-bottom: 6rpx solid rgb(124, 216, 135);
		}
		
	}
    .flex-2{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .gradient{
        padding: 3px 10px;
        color: #fff;
        border-radius: 30px;
        background: linear-gradient(to right, #7CD887,#75CCD1);
    }
    .first-blo{
        .title{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-top: 20px;
        }
        .val{
            font-size: 24rpx;
            margin-left: 10px;
        }
        .blo{
            margin-top: 20px;
            background: #2C2C3D;
            border-radius: 10px;
            padding: 12px;
        }

    }
    .green{
        color:#7CD887;
    
    }
    .grey{
        margin-top: 16px;
        color:#999;
    }
    .second{
        .img{
           
            border-radius: 10px;
           
        }
        .mask{
        position:absolute;
        top:0;
        border-radius: 10px;
           background: rgba(0,0,0,.3);
          
       }
        .posi1{
            position: relative;
            border-radius: 10px;
            margin-top: 14px;
            margin-right: 14px;
           
           
        }
        .title2{
            position: absolute;
            bottom: 4px;
            display: flex;
            width: 100%;
            justify-content: center;
            overflow: hidden;
            font-size: 12px;
            
        }
        .vip{
            position: absolute;
            top: 4px;
            right: 4px;
            padding: 0px 2px;
        color: #fff;
        font-size: 12px;
        border-radius: 4px;
        background: linear-gradient(to right, #7CD887,#75CCD1);
    
   
        }
    }

    .third{
        .blo{
           
           display: inline-block;
            position: relative;
            border-radius: 10px;
            margin-top: 14px;
            margin-right: 14px;
            
           
           
            .size{
                
                text-align: center;
                font-size: 12px;
            }
            .title3{
                margin-top: 10px;
                text-align: center;
                font-size: 12px;
            }
        }
    }
    .flex-l{
        display: inline-flex;
        white-space: nowrap;
    }

    .dash{
        border: 1px dashed #999;
    }   
    
    .upd{
        
        height: 160px;
        .image{
            width: 100%;
            height: 160px;
        }
       
        .center{
            display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        }
       

       .text{
        margin-top: 4px;
        color: 14px;

       }
       .text1{
        font-size: 12px;
        margin-top: 2px;
        color: #999;
        margin-bottom: 30px;
       }
    }
   
    

}

</style>
 